﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="PageTitle" runat="server">
    <title>工作评估</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PageStyles" runat="server">
    <link href="../../Content/table_jui.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/Attendance/attendance.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .tableContainer
        {
            word-break: break-all;
            word-wrap: break-word;
        }
    </style>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PageScripts" runat="server">
    <script src="../../Scripts/jquery.dataTables.js" type="text/javascript"></script>
    <script type="text/javascript">
    //************* URL常量


    //************* 全局变量

    var Global = {
        'day': null,
        'today': null,
        'endDate': null,
        'startDate': null,
    };

    //************* 常量定义
 
    var convertor = {
        " ": function (item) {
            var target = "";
            if(item.Index == 0 && item.TotalPoints > 0)
                target = '<img src="../../Content/icons/medal_gold_3.png" style="width: 24px; height: 24px;" alt="gold" />';
            else if(item.Index == 1 && item.TotalPoints > 0)
                target = '<img src="../../Content/icons/medal_silver_2.png" style="width: 24px; height: 24px;" alt="silver" />';
            else if(item.Index == 2 && item.TotalPoints > 0)
                target = '<img src="../../Content/icons/medal_bronze_1.png" style="width: 24px; height: 24px;" alt="bronze" />';
            return target;
        },
        "员工": function (item) {
            var targetUserName = item.TargetUser.Name;
            var targetUserDeptName = item.TargetUser.Dept.DeptName;
            return targetUserName + "<br/>" + "(" + targetUserDeptName + ")";
        },
        "工作量": function(item) {
            return item.TotalPoints;
        },
        "过期任务数": function (item) {
            return item.WoritemDelaiedCount;
        },
        "按时完成率": function (item) {
            return item.OnTimeCompletionRate;
        },
    };


    ///bindAttendanceList
    function bindWorkItemStatisticsList(workitemStatisticsList) {
        var data = DataConverterForDataTable.convertData(workitemStatisticsList, convertor);
        data.bPaginate = false;
        data.bRetrieve = true;
        data.bFilter = false;
        data.bSort = false;
        data.bInfo = false;
        
        $('#divWorkitemStatistics').empty();
        var tblAttendanceListPerMonth = $('<table id="tblWorkitemStatistics" class="tbl"/>')
            .appendTo('#divWorkitemStatistics')
        
        var oTable = $('#tblWorkitemStatistics')
            .dataTable(data);
       
        setTableCulumn();
        
        if(workitemStatisticsList){
            setEventColumn();            
        }
        
    }

    function setTableCulumn() {
        var target = $('#tblWorkitemStatistics thead tr th')[0];
        $(target).css({
            'width': '30px'
        });
        
        var member = $('#tblWorkitemStatistics thead tr th')[1];
        $(member).css({
            'width': '100px'
        });

    }


    //事件
    function setEventColumn() {
        var setTRCss = function (tr, color , mouseStatus){
            $(tr).css({
                "background-color": color,
                "cursor" : mouseStatus,
            });    
        };

        $('#tblWorkitemStatistics tbody tr').each( function () {
            var backgroundColor = $(this).css('background-color');
                $(this).hover(function() {
                    var _self = $(this);
                    setTRCss(_self, '#eee', 'pointer');
                 }, function() {
                    var _self = $(this);
                    setTRCss(_self, backgroundColor, 'default');
            })
        });
      
    }


    //setStatisticsTitle
    function setStatisticsTitle () {
        var starDay = Global.startDate.toFullDate(); 
        var endDay =  Global.endDate.toFullDate();

        $('#txt-title').html(starDay + " 至 " + endDay + "&nbsp;" + "月度工作排行榜");

    }

    function initPage() {
        
        $('#tip_Remind').eztips();
        //TODO:refactorying
        var dateParam = Date.fromEpoch(location.hash.slice(1, 11));
        
        if (dateParam && dateParam.constructor == Date) {
            Global.today = dateParam;
        }else {
            EzDesk.Service.GetCurrentDate_CacheSync(function (date) {
                Global.today = Date.fromEpoch(date);
            });
        }

        initDate(Global.today);
        updateStatistics();
    }

    function initDate (date) {
        Global.day = date

        Global.startDate = new Date (
            Global.day.getFullYear(),
            Global.day.getMonth(),
            1
        );
        
        Global.endDate = new Date (
            Global.day.getFullYear(),
            Global.day.getMonth() + 1,
            0
        );
    }
    
    function updateStatistics(){
        var isFuture = Global.today < Global.startDate; 
        setStatisticsTitle();        
        if(!isFuture) {
            $('#divWorkitemStatistics').show();
            $('#tblNoFuture').hide();

            EzDesk.Service.WorkitemStatistics_Sync(function (WorkitemStatistics) {
                bindWorkItemStatisticsList(WorkitemStatistics);    
            },{startDate: Global.startDate.toEpoch(), endDate: Global.endDate.toEpoch()});

        }else {
            $('#tblNoFuture').show();
            $('#divWorkitemStatistics').hide();
        }
    }
    function initPageEvent() {
        var changeWeekCallBack = function(dateOffset) {
             var date = new Date(
                Global.day.getFullYear(),
                Global.day.getMonth()+ dateOffset,
                Global.day.getDate() 
            );
            initDate(date);
            updateStatistics();
        }

        $('#preDay').click(function () {
           changeWeekCallBack(-1);
        });


        $('#nextDay').click(function () {
            changeWeekCallBack(+1);
        });
    }

    $(function () {
        initPage();
        initPageEvent();
    });
    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PageHead" runat="server">
    <%
        Html.RenderPartial("_sayHello"); %>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="PageContent" runat="server">
    <div id="page-head" class="page-head">
        <img src="../../Content/icons/ranking.png" style="width: 48px; height: 48px;"
            alt="perMonth" />
        <span id="txt-title" class="title"></span>
        <div style="margin-top: 5px; min-height: 20px;">
            <div style="float: left;">
                <a id="preDay">前一月</a>
            </div>
            <div style="float: right;">
                <a id="nextDay">后一月</a>
            </div>
        </div>
    </div>
    <div id="page-body">
        <div id="tblNoFuture" style="display: none;">
            <%Html.RenderPartial("_noFutureDisplayInfo"); %>
        </div>
        <div id="divWorkitemStatistics">
        </div>
    </div>
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="PageShortcut" runat="server">
</asp:Content>
<asp:Content ID="Content7" ContentPlaceHolderID="PageFoot" runat="server">
    <div id="tip_Remind" style="display: none;">
        <h1>
            小贴士:</h1>
        <p class="indent">
        </p>
    </div>
</asp:Content>
